
<script setup lang="ts">
const res=defineProps<{
name?:string
age?:number
}>()


// 定义了一个叫做changeAge的事件
// 参数age.类型是number
// 返回值为空
defineEmits<{
  (e:'changeAge',age:number):void
}>()
</script>

<template>
  <div>
    <h2>子组件</h2>

    <!-- props定义的数据，子组件的结构中可以直接使用，不需要用props点出来 -->
    <p>name:{{ name }}</p>
    <p>age:{{ age }}</p>
    <button @click="$emit('changeAge',20)">变年龄</button>
  </div>
</template>

<style scoped>
.div{
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
</style>